<template>
  <div class="list">
    <el-container>
      <el-header>
        <ListHeader></ListHeader>
      </el-header>
      <el-main>
        <el-table :data="title" style="width: 100%" height="500">
          <el-table-column prop="style" label="商品样式">
            <template v-slot="scope">
              <img
                :src="scope.row.style"
                alt=""
                style="width: 50px; height: 50px"
              />
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" />
          <el-table-column prop="stydentNum" label="订单编号" />
          <el-table-column
            prop="goodsData"
            label="下单时间"
            :formatter="dateFormat"
          >
            <template v-slot="scope">
              <div>
                {{ scope.row.goodsData }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="订单金额" />
          <el-table-column prop="paystyle" label="支付方式" />
          <el-table-column prop="label" label="订单状态" />
          <el-table-column prop="fen" label="评分">
            <template v-slot="scope">
              <span>
                {{ scope.row.fen }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="pingjia" label="评价" resizable />
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {
  ElMain,
  ElContainer,
  ElHeader,
  ElTableColumn,
  ElTable,
} from "element-plus";
import ListHeader from "./ListHeader.vue";
// import { onMounted } from 'vue';

export default {
  setup() {
    const dateFormat = function (row, column) {
      const date = row[column.property];

      if (date == undefined) {
        return "";
    }
      return date.slice(2,2);
    };
    return {
      dateFormat,
    }
  },
  components: {
    ElMain,
    ElContainer,
    ElHeader,
    ElTableColumn,
    ElTable,
    ListHeader,
  },
  props: {
    title: String,
    titleAll: String,
  },
};
</script>

<style lang="less" scoped>
/deep/.list {
  width: 100%;
  .el-container {
    .el-main {
      .el-table--fit {
        .el-table__inner-wrapper {
          .el-table__body-wrapper {
            .el-scrollbar {
              .el-scrollbar {
                .el-scrollbar__wrap {
                  .el-scrollbar__view {
                    /deep/.el-table__body {
                      tbody {
                        tr {
                          background: yellow;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    width: 100%;
    .el-header {
      width: 100%;
      position: relative;
      // background: blueviolet;
    }
  }
}
/deep/.el-table .warning-row {
  --el-table-tr-bg-color: blue;
}
.el-table .success-row {
  --el-table-tr-bg-color: black;
}
/deep/.el-table__cell {
  //表身行高
  margin-top: 10px;
  padding: 10px 0;
  height:50px;
}
// /deep/.el-table tr:hover {
//   background: blue;
// }
</style>
